<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>审核状态</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', sans-serif;
            background-color: #f5f7fa;
        }
        .success-animation {
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }
        .pulse-dot {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>
<body class="max-w-md mx-auto">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center">
            <h1 class="text-xl font-semibold text-center flex-1">审核状态</h1>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="flex flex-col items-center justify-center min-h-screen px-6 -mt-20">
        <!-- 成功图标 -->
        <div class="mb-8">
            <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center success-animation">
                <i class="fas fa-check-circle text-5xl text-green-500"></i>
            </div>
        </div>

        <!-- 成功标题 -->
        <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">
            提交成功！
        </h2>

        <!-- 状态描述 -->
        <div class="text-center mb-8">
            <p class="text-gray-600 text-lg mb-2">
                您的资质信息已成功提交
            </p>
            <p class="text-gray-500 text-sm">
                我们将在1-3个工作日内完成审核
            </p>
        </div>

        <!-- 审核状态卡片 -->
        <div class="bg-white rounded-xl shadow-sm p-6 w-full mb-8">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-800">审核进度</h3>
                <div class="flex items-center">
                    <div class="w-3 h-3 bg-yellow-400 rounded-full pulse-dot mr-2"></div>
                    <span class="text-yellow-600 text-sm font-medium">审核中</span>
                </div>
            </div>
            
            <!-- 进度条 -->
            <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                <div class="bg-yellow-400 h-2 rounded-full" style="width: 75%"></div>
            </div>
            
            <!-- 审核步骤 -->
            <div class="space-y-3">
                <div class="flex items-center">
                    <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <span class="text-gray-700">信息提交完成</span>
                </div>
                <div class="flex items-center">
                    <div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <span class="text-gray-700">初步审核通过</span>
                </div>
                <div class="flex items-center">
                    <div class="w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-clock text-white text-xs"></i>
                    </div>
                    <span class="text-gray-700">资质验证中</span>
                </div>
                <div class="flex items-center opacity-50">
                    <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-user-check text-gray-500 text-xs"></i>
                    </div>
                    <span class="text-gray-500">审核通过</span>
                </div>
            </div>
        </div>

        <!-- 温馨提示 -->
        <div class="bg-blue-50 rounded-xl p-4 w-full mb-8">
            <div class="flex items-start">
                <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                <div class="text-sm text-blue-700">
                    <p class="font-medium mb-1">温馨提示：</p>
                    <ul class="space-y-1 text-xs">
                        <li>• 审核期间请保持手机畅通</li>
                        <li>• 如有疑问请联系客服：400-123-4567</li>
                        <li>• 审核通过后将收到短信通知</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 确定按钮 -->
        <div class="w-full">
            <a href="../user/user-profile.html" 
               class="block w-full py-4 bg-blue-500 text-white text-center rounded-xl font-medium text-lg shadow-lg hover:bg-blue-600 transition-colors duration-200">
                确定
            </a>
        </div>

        <!-- 查看审核状态链接 -->
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-500 text-sm hover:text-blue-600">
                查看审核状态详情
            </a>
        </div>
    </div>
</body>
</html>
